<!--
 * @Author: GongSaiPeng
 * @Date: 2024-04-11 20:39:43
 * @LastEditTime: 2024-04-11 20:49:02
 * @LastEditors: GongSaiPeng
 * @Description: VFormRender组件
 * @FilePath: \main-app\src\components\vForm\VFormRender.vue
-->
<script setup lang="ts" name="">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import formJson from "./formJson.json";
/* 注意：formJson是指表单设计器导出的json，此处演示的formJson只是一个空白表单json！！ */
// const formJson = reactive({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}})
 

const formData = reactive({});
const optionData = reactive({});
const vFormRef = ref(null);

const submitForm = () => {
  vFormRef.value
    .getFormData()
    .then((formData) => {
      // Form Validation OK
      alert(JSON.stringify(formData));
    })
    .catch((error) => {
      // Form Validation failed
      ElMessage.error(error);
    });
};
</script>

<template>
  <div>
    <v-form-render
      :form-json="formJson"
      :form-data="formData"
      :option-data="optionData"
      ref="vFormRef"
    >
    </v-form-render>
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </div>
</template>

<style lang="less" scoped></style>
